<template>
  <div class="shopcar">
    <!-- 顶部 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 清空购物车 -->
    <div class="sc_button">
      <van-button class="sc_b" type="danger" @click="DeleteSC">清空购物车</van-button>
    </div>
    <van-divider class="sc_vd" />

    <!-- 初始无商品的购物车列表 -->
    <div class="sc_null" v-if="goodsList.length === 0">
      <div class="message">
        <van-icon name="shopping-cart-o" class="icon" />
        <span class="text">暂无商品~</span>
      </div>
    </div>

    <!-- 添加商品的购物车列表 -->
    <template>
      <van-swipe-cell class="swipeCell" v-for="(item,idx) of goodsList" :key="idx">
        <div class="card">
          <van-checkbox class="checkBox" v-model="item.isChecked"></van-checkbox>

          <!-- <router-link :to="{path:'/details',query:{id:item.goodsId}}"> -->
          <van-image class="image" :src="item.img" />
          <!-- </router-link> -->

          <div class="center">
            <div class="name">{{item.name}}</div>
            <div class="type">规格:{{item.sku}}</div>
            <div class="bottom">
              <p class="price">{{item.price | toFixed | rmb}}</p>
              <div class="num">
                <van-stepper integer v-model="item.num" />
              </div>
            </div>
          </div>
        </div>
        <template slot="right">
          <van-button class="delate" @click="removeItem(idx)" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </template>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="allTotal" button-text="提交订单" class="vsb">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>

    <tab-bar class="tb"></tab-bar>
  </div>
</template>

<script>
//import local from "@/utils/local.js"
export default {
  data() {
    return {
      goodsList: []
    };
  },
  computed: {
    // 全选
    allChecked: {
      get() {
        let bool;
        if (this.goodsList.length) {
          bool = this.goodsList.every(item => {
            return item.isChecked;
          });
        } else {
          bool = false;
        }
        return bool;
      },
      set(newVal) {
        if (!newVal) {
          this.goodsList.map(item => {
            item.isChecked = false;
          });
        } else {
          this.goodsList.map(item => {
            item.isChecked = true;
          });
        }
      }
    },
    // 总计
    allTotal() {
      let sum = 0;
      this.goodsList.forEach(item => {
        if (item.isChecked) {
          sum += item.num * item.price;
        }
      });
      return sum * 100;
    }
  },
  methods: {
    //顶部返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取details添加到购物车的商品列表数据
    getShopCarList() {
      this.goodsList = JSON.parse(localStorage.getItem("goodsList")) || [];
      //console.log(this.goodsList);
    },
    // 删除一件商品
    removeItem(idx) {
      //let goodsList = JSON.parse(localStorage.getItem("goodsList"))
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "是否删除该商品？"
        })
        .then(() => {
          this.goodsList.splice(idx, 1);
          //goodsList.splice("goodsList")
          //JSON.parse(localStorage.removeItem(idx))
          localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
          this.$toast.success("删除成功!");
          this.$router.go(0);
          console.log(this.goodsList);
        })
        .catch(() => {
          this.$dialog.close();
        });
    },
    // 清空购物车
    DeleteSC() {
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      this.$dialog
        .confirm({
          title: "清空购物车",
          message: "确定要清空购物车吗？"
        })
        .then(() => {
          this.goodsList = [];
          //this.remove(this.goodsList);
          //window.localStorage.clear()
          goodsList.splice(goodsList);
          localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
          //localStorage.removeItem("goodsList")
          this.$toast.success("购物车已清空!");
          this.$router.go(0);
          //console.log(this.list)
        })
        .catch(() => {
          this.$dialog.close();
        });
    },
  },
  created() {
    // let list = JSON.parse(localStorage.getItem("goodsList"))
    // console.log(list)
    this.getShopCarList();
  }
};
</script>

<style lang="scss">
@import "@/style/shopCar/shopcar.scss";

// .sc_vd {
//   margin: 0;
// }
</style>